<!-- 艺人每一项 -->
<template>
	<view class="listItem" :style="{margin: margin}">
		<view class="item">
			<view class="item-left">
				<view class="item-left-headImg">
					<image class="image" :src="pageData.headImg" mode="aspectFill"></image>
					<view :class="{
						tabs: true,
						tabs1: pageData.status === 0,
						tabs2: pageData.status === 1,
						tabs3: pageData.status === 2
					}">{{pageData.status | statusString}}</view>
				</view>
				<view class="item-left-title">
					<text class="title">{{pageData.name}}</text>
					<text class="phone">{{pageData.phone || '暂无电话'}}</text>
					<view class="tabs">
						<view class="tabs-iem tabs-age">{{pageData.age}}岁</view>
						<view class="tabs-iem tabs-height">{{pageData.height}}cm</view>
						<view class="tabs-iem tabs-weight">{{pageData.weight}}kg</view>
					</view>
				</view>
			</view>
			<view class="item-rigth">
				<view class="top" @click="open">
					<text
						class="top-text">服务时间：{{pageData.serviceStartTime | time}}-{{pageData.serviceEndTime | time}}</text>
					<uni-icons type="compose" size="28rpx" color="#3C4766"></uni-icons>
				</view>

				<view class="bottom">
					<view class="bottom-tabs" v-if="pageData.status !== 2" @click="modifyStatus(2)">空闲</view>
					<view class="bottom-tabs" v-if="pageData.status !== 1" @click="modifyStatus(1)">休息</view>
					<view class="bottom-tabs" v-if="pageData.status !== 0" @click="modifyStatus(0)">忙碌</view>
				</view>
			</view>
		</view>


		<!-- 弹出层 -->
		<TimeSelectBox ref="popup" :show="show" :startTime="pageData.serviceStartTime" :endTime="pageData.serviceEndTime" @submit="submit" @close="close" @setPagemetaShow="setPagemetaShow2"></TimeSelectBox>

	</view>
</template>

<script>
	//页面组件
	import TimeSelectBox from './timeSelectBox.vue'

	//请求api
	import {
		postArtistServiceTimeApi, // 修改艺人服务时间
		postArtistServiceStatusApi // 修改艺人服务状态
	} from '@/api/artistCentre.js'

	export default {
		props: {
			data: {
				type: Object,
				default: () => {}
			},
			init: {
				type: Function,
				default: () => {}

			},
			
			/**
			 * 防止穿透
			 */
			setPagemetaShow:{
				type:Function,
				default: ()=>{}
				
			},
			
			margin:{
				type:String,
				default:'0 0 24rpx 0'
			}
			
		},
		components: {
			TimeSelectBox,
		},
		data() {
			return {
				show: false,
				pageData: {}, // 页面数据
			};
		},
		created() {
			this.setPageDataInit(this.data)
		},
		filters: {
			//时间过滤
			time(val) {
				return val.slice(0, 5)
			},

			// 状态
			statusString(val) {
				switch (val) {
					case 0:
						return '忙碌';
						break;
					case 1:
						return '休息';
						break;
					case 2:
						return '空闲'
						break;
					default:
						return '未知'
				}
			}
		},
		methods: {
			/**
			 * 打开弹出层
			 */
			open() {
				this.show = true
			},
			/**
			 * 关闭弹出层
			 */
			close() {
				this.show = false
			},


			/**
			 * 时间选择点击确定
			 */
			submit(val) {

				this.postArtistServiceTime({
					id: this.pageData.id, // 艺人id
					serviceStartTime: val[0].value+':00', // 服务开始时间
					serviceEndTime: val[1].value+':00', // 服务结束时间
				})
				
			},

			/**
			 * 格式化页面数据
			 */
			setPageDataInit(val) {
				this.pageData = {
					id: val.id, // 艺人id
					headImg: val.coverUrl, // 头像
					status: val.serviceStatus, // 服务状态,0忙碌，1休息，2空闲
					name: val.stageName, // 名字
					phone: val.userPhone, // 电话号码（关联用户手机）

					age: val.age, // 年龄
					height: val.height, // 身高
					weight: val.weight, // 体重

					serviceStartTime: val.serviceStartTime, // 服务开始时间
					serviceEndTime: val.serviceEndTime, // 服务结束时间
				}
			},

			/**
			 * 设置艺人服务时间
			 */
			async postArtistServiceTime(params) {
				const res = await postArtistServiceTimeApi(params);
				// 报错提示
				if (res.code !== 200) {
					uni.showToast({
						duration: 3000,
						title: '设置失败',
						icon: 'none'
					})
					return
				}

				uni.showToast({
					duration: 3000,
					title: '设置成功',
					icon: 'none'
				})
				
				// 改变显示,但是实际数据没有重新请求,所以还是错误的
				this.pageData.serviceStartTime = params.serviceStartTime
				this.pageData.serviceEndTime = params.serviceEndTime
				
			},
			
			
			/**
			 * 修改艺人服务状态
			 */
			async modifyStatus(val){
				this.postArtistServiceStatus({
					id: this.pageData.id, // 艺人id
					serviceStatus: val, // 服务状态
				})
			},
			
			/**
			 * 修改艺人服务状态
			 */
			async postArtistServiceStatus(params){
				const res = await postArtistServiceStatusApi(params)
				// 报错提示
				if (res.code !== 200) {
					uni.showToast({
						duration: 3000,
						title: res.msg,
						icon: 'none'
					})
					return
				}
				
				uni.showToast({
					duration: 3000,
					title: '设置成功',
					icon: 'none'
				})
				
				// 修改服务状态的显示
				this.pageData.status = params.serviceStatus
			},
			
			
			/**
			 * 修改穿透
			 */
			setPagemetaShow2(e){
				this.$emit('setPagemetaShow',e)
			}

		},
		watch: {
			data: {
				handler(val) {
					this.setPageDataInit(this.data)
				},
				deep: true
			}
		}
	}
</script>

<style lang="less" scoped>
	.listItem {
	
		.item {
			#box(100%, auto, 32rpx, #fff);
			#flex(-, space-between, center);
			#padding(32rpx 24rpx);
			box-shadow: 0px 0px 8px 3px rgba(210, 211, 213, 0.5);

			// 左边两个
			.item-left {
				#flex(-, start, center);

				// 头像和标签
				.item-left-headImg {
					#flex(column, center, center);

					.image {
						#box(88rpx, 88rpx, 50%,rgba(#000,.1));
					}

					.tabs {
						#flex(-, center, center);
						#padding(6rpx 16rpx);
						border-radius: 14rpx;
						font-size: 16rpx;
						margin-top: 8rpx;
					}

					.tabs1 {
						color: #D86066;
						background: linear-gradient(90deg, #FFDCDC 0%, rgba(255, 236, 236, 0.4) 100%);
					}

					.tabs2 {
						color: #929292;
						background: #E5E5E5;
					}

					.tabs3 {
						color: #26605C;
						background: linear-gradient(90deg, #75BE9D 0%, rgba(204, 255, 232, 0.5) 100%, rgba(255, 255, 255, 0.5) 100%);
					}
				}

				// 主要的文字信息
				.item-left-title {
					#flex(column, center, flex-start);
					margin-left: 24rpx;

					.title {
						#font(32rpx, @font-title-color, 600);
					}

					.phone {
						#font(24rpx, #3c4766);
						margin: 16rpx 0;
					}

					.tabs {
						#flex(-, start, center);

						.tabs-iem {
							#padding(6rpx 12rpx);
							#font(16rpx, #fdf3f3);
							margin-right: 4rpx;
							border-radius: 14rpx;
						}

						.tabs-age {
							background: #E87884;
						}

						.tabs-height {
							background: #F7A254;
						}

						.tabs-weight {
							background: #8D82EE;
						}
					}

				}
			}


			.item-rigth {
				flex: 1;
				#flex(column, space-between, flex-end);

				.top {
					#font(24rpx, #3c4766);

					.top-text {
						margin-right: 10rpx;
					}
				}

				.bottom {
					#flex(-, start, center);
					margin-top: 40rpx;

					.bottom-tabs {
						#flex(-, center, center);
						#font(28rpx, #EC606F);
						#padding(8rpx 32rpx);
						border-radius: 22rpx;
						border: 2rpx solid #EC606F;
						margin-left: 16rpx;
					}
				}

			}
		}

	}
</style>